<template>
	<el-form ref="loginAccountRef" size="default" :model="formData" :rules="formRules" class="login-content-form">
		<el-form-item class="login-animation1" prop="tenantId" v-if="tenantEnable">
			<el-input type="text" :placeholder="$t('message.account.placeholder1')" v-model="formData.tenantId" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><el-icon-user /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2" prop="loginName">
			<el-input type="text" :placeholder="$t('message.account.placeholder2')" v-model="formData.loginName" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><el-icon-user /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation3" prop="password">
			<el-input
				:type="isShowPassword ? 'text' : 'password'"
				:placeholder="$t('message.account.placeholder3')"
				v-model="formData.password"
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><el-icon-unlock /></el-icon>
				</template>
				<template #suffix>
					<i
						class="iconfont el-input__icon login-content-password"
						:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="isShowPassword = !isShowPassword"
					>
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation4" v-if="kaptchaEnable" prop="verifyCode">
			<el-col :span="17">
				<el-input
					type="text"
					maxlength="4"
					:placeholder="$t('message.account.placeholder4')"
					v-model="formData.verifyCode"
					clearable
					autocomplete="off"
					@keyup.enter.native="onSignIn"
				>
					<template #prefix>
						<el-icon class="el-input__icon"><el-icon-position /></el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span="1"></el-col>
			<el-col :span="6">
				<div class="login-content-code">
					<el-image :src="kaptchaUrl" @click="onKaptchaClick"></el-image>
				</div>
			</el-col>
		</el-form-item>
		<el-form-item class="login-animation5">
			<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading">
				<span>{{ $t('message.account.accountBtnText') }}</span>
			</el-button>
		</el-form-item>
		<div class="font12 login-animation5 text-align-right mb10 w100">
			<el-link class="font12" type="primary" :underline="false" @click="onForgetClick">{{ $t('message.other.forget') }}</el-link>
		</div>
		<div class="font12 login-animation5 login-msg">{{ $t('message.other.tips') }}</div>
	</el-form>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { Local, Session } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
import { signIn, kaptchaVerify } from '/@/api/login/index';

export default defineComponent({
	name: 'login/account',
	props: {
		// 绑定值
		tenantEnable: {
			type: Boolean,
			default: () => false,
		},
	},
	setup(props, { emit }) {
		const loginAccountRef = ref();
		const router = useRouter();
		const state = reactive({
			isShowPassword: false,
			kaptchaEnable: true,
			tenantEnable: false,
			kaptchaUrl: '',
			formData: {
				tenantId: '',
				loginName: '',
				password: '',
				verifyKey: 0,
				verifyCode: '',
			},
			loading: false,
			formRules: {
				tenantId: {required: true, message: '租户号码不能为空', trigger: 'blur' },
				loginName: {required: true, message: '登录账号不能为空', trigger: 'blur' },
				password: { required: true, message: '登录密码不能为空', trigger: 'blur' },
				verifyCode: { required: true, message: '验证码不能为空', trigger: 'blur' },
			}
		});
		
		// 登录
		const onSignIn = () => {
			loginAccountRef.value.validate(valid => {
				if(valid){
					state.loading = true;
					const publicKey = Local.get('publicKey');
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					let password = SM.sm2Encrypt(state.formData.password, publicKey);
					let params = {
						loginType: 1,
						loginName: loginName, 
						password: password, 
						verifyKey: state.formData.verifyKey, 
						verifyCode: state.formData.verifyCode,
					};
					Session.set('tenantId', state.formData.tenantId);
					signIn(params).then((res: any) => {
						// 关闭 loading
						state.loading = false;
						if(res.code == 0){
							// 存储 token 到浏览器缓存
							Session.set('token', res.data.accessToken);
							Session.set('refreshToken', res.data.refreshToken);
							emit('success');
						}else{
							state.formData.verifyCode = '';
							Session.clear();
							loadKaptchaVerify();
						}
					},() => {
						// 关闭 loading
						state.loading = false;
						state.formData.verifyCode = '';
						Session.clear();
						loadKaptchaVerify();
					});
				}
			});
		}
		// 加载验证码
		const loadKaptchaVerify = () => {
			state.formData.verifyKey = new Date().getTime();
			kaptchaVerify({verifyKey: state.formData.verifyKey}).then((res: any) => {
				if(res && res.size > 0){
					const blob = new Blob([res]);
					var url = window.URL.createObjectURL(blob);
					state.kaptchaEnable = true;
					state.kaptchaUrl = url;
				}else{
					state.kaptchaEnable = false;
				}
			});
		}
		
		// 点击验证码
		const onKaptchaClick = () => {
			loadKaptchaVerify();
		}
		// 忘记密码
		const onForgetClick = () => {
			router.push('/forget');
		}
		
		onMounted(() => {
			loadKaptchaVerify();
		});

		watch(() => props.tenantEnable, () => {
			state.tenantEnable = props.tenantEnable;
		});

		return {
			loginAccountRef,
			onSignIn,
			onKaptchaClick,
			onForgetClick,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;
	padding: 0 1px;
	@for $i from 1 through 5 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
		display: flex;
		.el-image{
			height: 32px;
		}
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
	.login-msg {
		color: var(--el-text-color-placeholder);
	}
	.text-align-right{
		text-align: right;
	}
}
</style>
